<template>
	<div>
		<van-nav-bar class="nav-bar" title="搜索" left-arrow @click-left="$router.back('/login')" />

		<div class="content">


			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">


				<tList ref="tList" url="/api/search" :key_word="$route.query.keyword" @stopRefresh="stopRefresh">
					<template #content="{list}">
						<div class="article_list" v-for="(item,index) in list">
							<div class="list_item">
								<div class="title">{{item.title}}</div>

								<div class="img_type1" v-if="item.imageSrc && item.imageSrc.length == 1">
									<video :src="img" v-for="img in item.imageSrc" v-if="img.endsWith('mp4')">
										<source src="myvideo.mp4" type="video/mp4">
										</source>
									</video>
									<div v-else>
										<img :src="img" v-for="img in item.imageSrc" />
									</div>
								</div>
								<div class="img_type2" v-if="item.imageSrc && item.imageSrc.length > 1"><img :src="img"
										v-for="img in item.imageSrc" /></div>

								<div class="aricle_bottom">
									<span>{{ item.author }}</span>
									<span>{{ item.comment }}评论</span>
									<span>{{ item.time|formatTime }}</span>
								</div>
							</div>
						</div>
					</template>
				</tList>

			</van-pull-refresh>
		</div>
	</div>
</template>

<script>
	import tList from '@/components/t_list.vue'
	export default {
		data() {
			return {
				refreshing: false, //  是否正在刷新
			}
		},
		components: {
			tList
		},
		methods: {
			// 下拉刷新
			onRefresh() {
				this.$refs['tList'].finished = false;

				this.$refs['tList'].get_list('Refresh');


			},
			stopRefresh() {
				this.refreshing = false
			},

		}
	}
</script>

<style scoped="scoped">
	/deep/.van-icon-arrow-left:before {
		font-size: 150%;
		color: black;
	}

	/deep/.van-nav-bar__title {
		font-size: 120%;
	}
</style>
<style>
	.van-tabs__wrap--scrollable .van-tab {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}

	.home_header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		z-index: 999;
	}

	.content {
		width: 100%;
		height: 100%;
		padding-bottom: 100px;
		background: #fff;
	}

	.van-list {}

	.article_list {
		padding: 0 20px;

		.list_item {
			width: 100%;
			padding: 12px 0 0 0;
			overflow: hidden;
			white-space: pre-wrap;

			.title {
				margin: 0 0 10px 0;
			}
		}

		.img_type1 {
			width: 100%;

			img {
				width: 100%;
				height: 420px;
			}
		}

		.img_type2 {
			width: 100%;
			display: flex;
			overflow: hidden;

			img {
				width: 32%;
				margin-right: 2%;
			}
		}

		.aricle_bottom {
			display: flex;
			height: 40px;
			align-items: center;
			color: #888;
			border-bottom: 1px solid #eee;
			font-size: 14px;

			span {
				margin-right: 20px;
			}
		}
	}
</style>
